<template>
    <div class="btns">
        <div v-for="item in list" @click="onClick(item.type)" :class="{ active: type == item.type }" class="btn">{{ item.label }}</div>
       
    </div>
</template>
<script setup lang="ts">
const props = defineProps<{
    list: {label: string, type: number}[]
}>()
const type = defineModel<number>('type')
const emit = defineEmits<{
    select: [number]
}>()
const onClick = (a:number) => {
    type.value = a
    emit('select', a)
}
</script>
<style scoped>

.btns{
    position: absolute;
    top: 1vh;
    right: 1vw;
    z-index: 10;
    color: #fff;
}
.btn{
    border:1px #36c7dd solid;
    color: #36c7dd;
    border-radius: 10px;
    text-align: center;
    padding: 0.1vh 1vw;
    cursor: pointer;
    display: inline-block;
    margin: 0 0 0 1vw;
    font-size: 1.5vh;
   
}
.btn.active{
    color: #fff;
    background: #36c7dd;
}
</style>